feat(markdown): render frontmatter in file previews - #8202
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (8)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughAdds shared YAML frontmatter parsing and display types. Web and mobile Markdown previews now show frontmatter in tables and render only the Markdown body. Task-list edits account for the removed frontmatter offset. Documentation covers formatting and fallback behavior. ChangesMarkdown frontmatter previews
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: 🟡 Moderate · up to Frontmatter rendering changes the coordinates used when editing task-list checkboxes in web previews. If a file changes concurrently, an edit could toggle the wrong checkbox, and a failed save may leave the preview showing changes that were not persisted. This should be fixed or explicitly accepted before merging. Sequence Diagram(s)sequenceDiagram
participant FilePreview
participant Parser as parseMarkdownFrontmatter
participant Table as MarkdownFrontmatterTable
participant Renderer as ChatMarkdown
FilePreview->>Parser: Parse Markdown source
Parser-->>FilePreview: Return entries, body, and bodyOffset
FilePreview->>Table: Render frontmatter entries
FilePreview->>Renderer: Render parsed body
FilePreview->>FilePreview: Apply bodyOffset to task-list edits
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 8 functions across 5 files. (3 skipped: 3 unsupported.) ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
vouch:trusted
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 39107ac224
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {frontmatter.entries.length > 0 ? ( | ||
| <MarkdownFrontmatterTable entries={frontmatter.entries} /> |
There was a problem hiding this comment.
This introduces user-visible frontmatter rendering across the web, desktop, and mobile file previews, but the commit adds no corresponding docs/user/ documentation. Add shipped-product documentation explaining when leading YAML frontmatter is rendered and which values remain unchanged.
AGENTS.md reference: AGENTS.md:L75-L75
Useful? React with 👍 / 👎.
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Not approved Macroscope's review found this PR not approvable — This PR adds a new shared frontmatter parser and metadata-table rendering across web and mobile previews, including changes to rendered Markdown and task-list offset handling. The cross-platform user-facing behavior and multiple new components warrant human review. You can add or adjust custom eligibility rules. Learn more. |
There was a problem hiding this comment.
Reviewed the new web frontmatter table and its call site in FilePreviewPanel. Two consistency findings on apps/web/src/components/files/MarkdownFrontmatterTable.tsx: the table reconstructs table/overflow treatment that the rendered-markdown surface already owns, and the list pills reconstruct Badge. The task-offset rebasing in RenderedMarkdownSurface and the token usage (border-border, text-foreground/80 are bridged to the --contrast-* roles in index.css) look correct.
Posted via Macroscope — UI Consistency
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 09e8576. Configure here.
There was a problem hiding this comment.
Two ownership/behavior issues in the new frontmatter table styling. Both stem from reusing the .chat-markdown table rules for .markdown-table without the surrounding contract those rules assume.
Posted via Macroscope — UI Consistency
| <tr key={entry.key}> | ||
| <th | ||
| scope="row" | ||
| className="w-px whitespace-nowrap bg-muted/30 !text-right align-middle font-semibold text-foreground" |
There was a problem hiding this comment.
The ! on !text-right is only needed because this PR adds .markdown-table th to the unlayered text-align: left rule in index.css, and unlayered global CSS outranks Tailwind's layered utilities — the owner ends up overriding its own global rule with !important, which is fragile for any later cell that wants a different alignment.
Consider scoping the global rule to the cells that actually want left alignment (.chat-markdown th, .chat-markdown td, .markdown-table td, keeping the shared padding for .markdown-table th) and leaving alignment at the owner as a plain text-right.
Posted via Macroscope — UI Consistency
|
@coderabbitai review |
✅ Action performedReview finished.
|
|
Note 🤖 GPT-5.6 Sol responding on behalf of Theo We're closing this PR as we clean up the T3 Code backlog. Thank you for taking the time to put this together. We are not adding frontmatter rendering to file previews in this pass. The preview remains usable, and this extra presentation rule is not a priority for the active queue. If you believe we closed this in error, please reopen the PR and leave a comment explaining what we missed. |
2 participants
What Changed
Markdown file previews now render leading YAML frontmatter as a metadata table on web, desktop, and mobile.
Scalar arrays render as pills. Nested values render as YAML. Invalid, unclosed, and non-mapping frontmatter remains unchanged.
Why
File previews previously displayed frontmatter as raw Markdown delimiters and YAML. This matches GitHub's metadata-table presentation while keeping parsing shared and platform rendering local.
UI Changes
Before:
After:
Checklist
Implemented with GPT-5.6 Sol using Codex in T3 Code.
Note
Medium Risk
Strips frontmatter from the rendered stream and shifts task-list save offsets; a parsing or offset bug could mis-edit markdown files that include frontmatter.
Overview
Rendered markdown file previews now peel off leading
---YAML frontmatter and show it as a metadata table above the body on web/desktop and mobile, instead of rendering the raw delimiter block as markdown.A shared
parseMarkdownFrontmatterexport splits the file intoentries,body, andbodyOffset(for mapping edits back into the full source). Scalars render as text, homogeneous scalar arrays as pills/badges, and nested structures as monospace YAML. Invalid, unclosed, or non-mapping frontmatter is left in the body unchanged.Web
RenderedMarkdownSurfacepasses onlyfrontmatter.bodytoChatMarkdownand addsfrontmatter.bodyOffsetwhen applying task-list checkbox toggles viasetMarkdownTaskChecked. MobileFileMarkdownPreviewdoes the same split for native/selectable markdown renderers. New platformMarkdownFrontmatterTablecomponents handle layout; web adds a.markdown-tableCSS hook sharing compact table styling with chat markdown. User docs describe detection and fallback behavior.Reviewed by Cursor Bugbot for commit ae9eea8. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Render YAML frontmatter as a metadata table in file previews
parseMarkdownFrontmatterin markdownFrontmatter.ts (exported via./markdown-frontmatter) that splits a markdown string into frontmatter entries, a body segment, and abodyOffsetfor source mappingMarkdownFrontmatterTableabove the markdown body and pass onlyfrontmatter.bodyto the markdown rendereronTaskListChangemarker offsets byfrontmatter.bodyOffsetso checkbox mutations map back to the original file contents.markdown-tableclass sharing compact table styles with.chat-markdownwithout the chat-specific overflow rules---delimited frontmatter render unchangedMacroscope summarized ae9eea8.
Summary by CodeRabbit
New Features
Documentation